<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery投票工具点击量翻转累加</title>
<meta name="description" content="jquery投票工具系统，通过点击投票工具计算点击量累加。投票工具点击量文字上下翻转累加。" />

<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}
/* votecard */
.votecard{background:url(images/sprite.png) no-repeat 0 0;padding:4px;width:63px;height:43px;text-align:center;}
.votecard div{position:relative;overflow:hidden;width:63px;height:43px;}
.votecard em{display:block;position:relative;width:63px;height:33px;padding:6px 0 6px 0;font:normal 24px/24px "Helvetica Neue","Helvetica","Arial",Sans-serif;color:#45453f;}
.votecard strong{font-weight:bold;}
.votecard span{font-size:10px;line-height:10px;display:block;color:#9a9a94;}
a.voteaction{margin:0 0 0 3px;display:block;text-indent:-9999px;width:71px;height:21px;background:url(images/sprite.png) no-repeat -3px -75px;}
a.voteaction:hover{outline:none;background-position:-3px -54px;}
a.voted,a.voted:hover{outline:none;background-position:-3px -96px;cursor:default;}
</style>

<script type="text/javascript" src="../../jquery/lib/jquery.skin.js"></script>
<script type="text/javascript">
$(document).ready(function(){

	/* 创建一个节点 */
	$(".votecard em").clone().appendTo(".votecard div");

	/* 增加1 */
	var node = $(".votecard em:last strong")
		node.text(parseInt(node.text())+1);
		
	function flip(obj){
		obj.prev().find("em").animate({
			top: '-=45'
		}, 200);
		obj.toggleClass("voted",true);
	}

	$('.voteaction').bind({
		click:function(event){
			event.preventDefault()
		},
		mouseup:function(){
			flip($(this));
			$(this).unbind('mouseup');
		}
	});

});
</script>

</head>
<body>
	
<div style="width:63px;margin:40px auto;">
	
	<div class="votecard">
		<div>
			<em><strong>999</strong><span>点击量</span></em>
		</div>
	</div>
	<a class="voteaction" href="">Flippit</a>

</div>
	
</body>
</html>
